<template>
  <div class="count">
    <Card :bordered="false">
      <p slot="title"
         class="white">
        统计分析 >
        <span class="select-font">综合考核统计</span>
      </p>
      <div>
        <Form :model="searchItem"
              class="smallForm">
          <DatePicker type="month"
                      :value="searchItem.time_sign"
                      @on-change="changeTime"
                      placeholder="请选择巡查时间"
                      style="width: 200px;"></DatePicker>
        </Form>
        <Button type="info"
                style="margin-left:25px"
                @click="getData()">搜索</Button>
        <Button type="primary"
                style="margin-left:25px"
                @click="exportAllData(1)">导出数据</Button>
      </div>
    </Card>
    <div>
      <Table :columns="cityColumns"
             :data="data"
             :max-height="maxHeight"
             stripe></Table>
      <div class="uploadBox">
        <span>巡河次数导出</span>
        <DatePicker type="year"
                    v-model="uploadItem.year"
                    placeholder="请选择年份"
                    class="uploadInput"></DatePicker>
        <Select placeholder="请选择区"
                multiple
                v-model="uploadItem.area"
                clearable
                class="uploadInput">
          <Option v-for="(item,index) in areaList"
                  :key="index"
                  :value="item">{{item}}</Option>
        </Select>
        <Select placeholder="请选择街/镇"
                multiple
                v-model="uploadItem.town"
                class="uploadInput">
          <Option v-for="(item,index) in townList"
                  :key="index"
                  :value="item.name">{{item.name}}</Option>
        </Select>
        <Select placeholder="请选择河长级别"
                multiple
                v-model="uploadItem.user_type"
                class="uploadInput">
          <Option v-for="(item,index) in levelList"
                  :key="index"
                  :value="item.value">{{item.name}}</Option>
        </Select>
        <Button type="primary"
                @click="exportRiverData">确认导出</Button>
      </div>
    </div>
    <Modal v-model="chiefModal"
           :mask-closable="false"
           title="河长信息">
      <Table :columns="chiefColumns"
             :data="chiefData"
             stripe></Table>
      <Page style="text-align:right;margin-top: 10px;"
            :total="Page.total"
            :current="Page.page"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
    </Modal>
    <Modal v-model="patrolModal"
           title="巡河信息"
           :mask-closable="false"
           width="1200">
      <Table ref="table"
             :data="patrolData"
             :columns="patrolColumns"
             stripe></Table>
      <Page style="text-align:right;margin-top: 10px;"
            :total="Page.total"
            :current="Page.page"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePatrolPage"></Page>
    </Modal>
    <Modal class="score-count"
           v-model="scoreModal"
           :mask-closable="false"
           title="河长扣分数"
           width="1200">
      <Table v-if="scoreModal"
             ref="table"
             :data="scoreData"
             :columns="scoreColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="scorePage.total"
            :current="scorePage.page"
            :page-size="scorePage.pageSize"
            size="small"
            show-total
            @on-change="changeScorePage"></Page>
    </Modal>
    <Modal class="user-count"
           v-model="deductModal"
           :mask-closable="false"
           title="扣分规则"
           width="1200">
      <Table ref="table"
             :data="deductData"
             :columns="deductColumns"
             stripe></Table>
    </Modal>
    <Spin size="large"
          fix
          v-if="spinShow"></Spin>
  </div>
</template>

<script>
import { ajaxPost, ajaxFilePost } from 'global/axios';
import { diyLiuDownload, timeFilter } from 'common/js/util';
import { getBodyHeight } from 'common/js/dom';
import storage from 'good-storage';
import tableDropdown from 'public/tableHeaderDropdown';
export default {
  data() {
    return {
      chiefModal: false,
      spinShow: false,
      patrolModal: false,
      saveType: '',
      saveRegion: '',
      saveRegionType: '',
      saveLevel: 1,
      savePatrolRegion: '',
      patrolData: [],
      uploadItem: {
        year: timeFilter(new Date(), 'yyyy'),
        area: [],
        town: [],
        user_type: [],
      },
      patrolColumns: [
        {
          type: 'index',
          width: 60,
          align: 'center',
        },
        {
          title: '河长',
          key: 'personel_name',
        },
        {
          title: '河流名称',
          key: 'river_name',
        },
        {
          title: '本次巡河景观图',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.scenerys.length);
          },
        },
        {
          title: '本次巡河举报数量',
          align: 'center',
          render: (h, params) => {
            return h('div', params.row.reports.length);
          },
        },
        {
          title: '巡查日期',
          key: 'end_time',
        },
        {
          title: '巡查时间',
          key: 'runtime',
        },
      ],
      chiefColumns: [
        {
          title: '姓名',
          key: 'realname',
        },
        {
          title: '级别',
          key: 'type_name',
        },
        {
          title: '职位',
          width: 250,
          key: 'position',
        },
      ],
      chiefData: [],
      searchItem: {
        time_sign: new Date().format('yyyy-MM'),
        user_type: '0,1|#|in',
      },
      Page: {
        total: 0,
        page: 1,
        pageSize: 10,
      },
      maxHeight: 0,
      data: [],
      cityColumns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h('Table', {
              props: {
                data: params.row.son,
                columns: this.areaColumns,
                stripe: true,
              },
            });
          },
        },
        {
          title: '区域',
          minWidth: 100,
          align: 'center',
          key: 'name',
        },
        {
          title: '市级河长人数',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('city');
                  },
                },
              },
              params.row.city_chief_num
            );
          },
        },
        {
          title: '市河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'city_chief_patrol_num',
        },
        {
          title: '区级河长人数',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('area');
                  },
                },
              },
              params.row.area_chief_num
            );
          },
        },
        {
          title: '区河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'area_chief_patrol_num',
        },
        {
          title: '镇级河长人数',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('town');
                  },
                },
              },
              params.row.town_chief_num
            );
          },
        },
        {
          title: '镇河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'town_chief_patrol_num',
        },
        {
          title: '村级河长人数',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('village');
                  },
                },
              },
              params.row.village_chief_num
            );
          },
        },
        {
          title: '村河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'village_chief_patrol_num',
        },
        {
          title: '巡查总次数',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.Page.page = 1;
                    this.patrolModal = true;
                    this.getPatrolData(1);
                  },
                },
              },
              params.row.patrol_num
            );
          },
        },
        {
          title: '河长扣分数',
          minWidth: 100,
          align: 'center',
          key: 'deduct_score',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.scoreModal = true;
                    this.scorePage.page = 1;
                    this.searchItem.user_type = '0,1|#|in';//等级 全选
                    this.getScoreData();
                  },
                },
              },
              params.row.deduct_score
            );
          },
        },
      ],
      areaColumns: [
        {
          type: 'expand',
          width: 50,
          render: (h, params) => {
            return h('Table', {
              props: {
                data: params.row.son,
                columns: this.townColumns,
                stripe: true,
              },
            });
          },
        },
        {
          title: '区域',
          key: 'name',
          minWidth: 100,
          align: 'center',
        },

        {
          title: '市级河长人数',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('city', params.row.name);
                  },
                },
              },
              params.row.city_chief_num
            );
          },
        },
        {
          title: '市河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'city_chief_patrol_num',
        },
        {
          title: '区级河长人数',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('area', params.row.name);
                  },
                },
              },
              params.row.area_chief_num
            );
          },
        },
        {
          title: '区河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'area_chief_patrol_num',
        },
        {
          title: '镇级河长人数',
          minWidth: 100,
          align: 'center',
          key: 'town_chief_num',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('town', params.row.name);
                  },
                },
              },
              params.row.town_chief_num
            );
          },
        },
        {
          title: '镇河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'town_chief_patrol_num',
        },
        {
          title: '村级河长人数',
          minWidth: 100,
          align: 'center',
          key: 'village_chief_num',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('village', params.row.name);
                  },
                },
              },
              params.row.village_chief_num
            );
          },
        },
        {
          title: '村河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'village_chief_patrol_num',
        },
        {
          title: '巡查总次数',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.Page.page = 1;
                    this.patrolModal = true;
                    this.getPatrolData(2, params.row.name);
                  },
                },
              },
              params.row.patrol_num
            );
          },
        },
        {
          title: '河长扣分数',
          minWidth: 100,
          align: 'center',
          key: 'deduct_score',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.scoreModal = true;
                    this.scorePage.page = 1;
                    this.searchItem.user_type = '0,1|#|in'; //等级 全选
                    this.getScoreData('area', params.row.name);
                  },
                },
              },
              params.row.deduct_score
            );
          },
        },
      ],
      townColumns: [
        {
          title: '区域',
          key: 'name',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '区级河长人数',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('area', params.row.name);
                  },
                },
              },
              params.row.area_chief_num
            );
          },
        },
        {
          title: '区河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'area_chief_patrol_num',
        },
        {
          title: '镇级河长人数',
          minWidth: 100,
          align: 'center',
          key: 'town_chief_num',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('town', params.row.name, 1);
                  },
                },
              },
              params.row.town_chief_num
            );
          },
        },
        {
          title: '镇河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'town_chief_patrol_num',
        },
        {
          title: '村级河长人数',
          minWidth: 100,
          align: 'center',
          key: 'village_chief_num',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.showModal();
                    this.getPerson('village', params.row.name, 1);
                  },
                },
              },
              params.row.village_chief_num
            );
          },
        },
        {
          title: '村河长巡河次数',
          minWidth: 100,
          align: 'center',
          key: 'village_chief_patrol_num',
        },
        {
          title: '巡查总次数',
          minWidth: 100,
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.Page.page = 1;
                    this.patrolModal = true;
                    this.getPatrolData(3, params.row.name);
                  },
                },
              },
              params.row.patrol_num
            );
          },
        },
        {
          title: '河长扣分数',
          minWidth: 100,
          align: 'center',
          key: 'deduct_score',
          render: (h, params) => {
            return h(
              'div',
              {
                style: {
                  cursor: 'pointer',
                },
                on: {
                  click: () => {
                    this.scoreModal = true;
                    this.scorePage.page = 1;
                    this.searchItem.user_type = '0,1|#|in';
                    this.getScoreData('town', params.row.name);
                  },
                },
              },
              params.row.deduct_score
            );
          },
        },
      ],
      levelList: [
        {
          name: '村级河长',
          value: '0',
        },
        {
          name: '镇级河长',
          value: '1',
        },
        {
          name: '区级河长',
          value: '2',
        },
        {
          name: '市级河长',
          value: '3',
        },
      ],
      areaList: ['南海区', '三水区', '禅城区', '顺德区', '高明区'],
      townList: [],
      urlCheck: '/stat/chiefs/checkstat',
      scoreModal: false,
      scoreColumns: [
        {
          title: '河长名',
          key: 'realname',
        },
        {
          title: '等级',
          key: 'user_type',
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '等级',
                data: [
                  { value: 'all', name: '全部' },
                  { value: '1', name: '镇级河长' },
                  { value: '0', name: '村级河长' },
                ],
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.searchItem.user_type = data;
                    this.getScoreData(this.currRegion, this.currRegionName);
                  } else {
                    this.searchItem.user_type = '0,1|#|in';
                    this.getScoreData(this.currRegion, this.currRegionName);
                  }
                },
              },
            });
          },
          render: (h, params) => {
            if (params.row.user_type === '0') {
              return h('div', {}, '村级河长');
            } else if (params.row.user_type === '1') {
              return h('div', {}, '镇级河长');
            }
          },
        },
        {
          title: '巡河总次数',
          align: 'center',
          key: 'num',
        },
        {
          title: '达标次数',
          align: 'center',
          key: 'pass_count',
        },
        {
          title: '巡查频率',
          align: 'center',
          render: (h, params) => {
            return h(
              'div',
              {},
              params.row.frequency_count !== null
                ? params.row.frequency_count
                : ''
            );
          },
        },
        {
          title: '扣分',
          align: 'center',
          render: (h, params) => {
            if (params.row.deduct_score === 0) {
              return h('div', params.row.deduct_score);
            } else {
              return h(
                'div',
                {
                  style: {
                    cursor: 'pointer',
                  },
                  on: {
                    click: () => {
                      this.deductModal = true;
                      this.deductData =
                        params.row.deduction_items &&
                        params.row.deduction_items.length > 0
                          ? params.row.deduction_items
                          : [];
                    },
                  },
                },
                params.row.deduct_score
              );
            }
          },
        },
        {
          title: '是否达标',
          align: 'center',
          key: 'pass',
          render: (h, params) => {
            return h('div', {}, params.row.pass ? '是' : '否');
          },
        },
      ],
      scoreData: [],
      currRegion: '',
      currRegionName: '',
      scorePage: {
        total: 0,
        page: 1,
        pageSize: 10,
      },
      // 扣分规则
      deductModal: false,
      deductData: [],
      deductColumns: [
        {
          title: '扣分值',
          align: 'center',
          key: 'deduct_score',
        },
        {
          title: '检查内容',
          align: 'center',
          key: 'item_name',
        },
        {
          title: '说明',
          align: 'center',
          key: 'description',
        },
      ],
    };
  },
  methods: {
    getData() {
      let params = {
        url: '/stat/chiefs/statchief',
        token: storage.session.get('token'),
        data: {
          month: this.searchItem.time_sign,
        },
        success: res => {
          // 改变测试区位置
          if (res.data.result) {
            if (
              Array.isArray(res.data.result.son) &&
              res.data.result.son.length > 0
            ) {
              res.data.result.son.map((item, index, arr) => {
                if (item.name == '测试区') {
                  arr.push(arr.splice(index, 1)[0]);
                }
              });
            }
          }
          this.data = [res.data.result];
        },
      };
      ajaxPost(params);
    },
    changeTime(data) {
      this.searchItem.time_sign = data;
    },
    showModal() {
      this.Page.page = 1;
      this.chiefModal = true;
    },
    getPerson(type, region = '', regionType = 0) {
      this.saveType = type;
      let obj = {
        village: '0',
        town: '1',
        area: '2',
        city: '3',
      };
      let params = {
        url: '/stat/chiefs/listbyname',
        token: storage.session.get('token'),
        data: {
          page: this.Page.page,
          pageSize: this.Page.pageSize,
          searchValue: {
            user_type: obj[type],
            month: this.searchItem.time_sign,
          },
        },
        success: res => {
          this.chiefData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (region !== '') {
        this.saveRegion = region;
        this.saveRegionType = regionType;
        if (region && region.slice(-3) === '河长办') {
          // 河长办传参name
          params.data.searchValue['departments.name'] = region;
        } else if (region && region.slice(-1) === '区') {
          // 区传参area
          params.data.searchValue['departments.area'] = region;
        } else {
          params.data.searchValue['departments.town'] = region;
        }
      } else {
        this.saveRegion = '';
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.Page.page = page;
      this.getPerson(this.saveType, this.saveRegion, this.saveRegionType);
    },
    changeScorePage(page) {
      this.scorePage.page = page;
      this.getScoreData(this.currRegion, this.currRegionName);
    },
    changePatrolPage(page) {
      this.Page.page = page;
      this.getPatrolData(this.saveLevel, this.savePatrolRegion);
    },
    getPatrolData(level, region) {
      this.saveLevel = level;
      let params = {
        url: '/emergency/patrol/listall',
        token: storage.session.get('token'),
        data: {
          page: this.Page.page,
          pageSize: this.Page.pageSize,
          searchValue: {},
        },
        success: res => {
          this.patrolData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      params.data.searchValue['user_type'] = '0,1,2,3|#|in';
      if (level === 2) {
        this.savePatrolRegion = region;
        if (region && region.slice(-3) === '河长办') {
          // 如果是河长办，传参为dep_name和basis
          params.data.searchValue['location.dep_name'] = region;
          params.data['basis'] = 1;
        } else {
          params.data.searchValue['location.area'] = region;
        }
      } else if (level == 3) {
        params.data.searchValue['user_type'] = '0,1,2|#|in';
        this.savePatrolRegion = region;
        if (region && region.slice(-3) === '河长办') {
          // 如果是河长办，传参为dep_name和basis
          params.data.searchValue['location.dep_name'] = region;
          params.data['basis'] = 1;
        } else {
          params.data.searchValue['location.town'] = region;
        }
      }
      if (this.searchItem.time_sign) {
        params.data.searchValue.month = this.searchItem.time_sign;
      }
      ajaxPost(params);
    },
    exportRiverData() {
      if (this.uploadItem.year === '' || this.uploadItem.year === undefined) {
        this.$Message.warning('请选择年份');
        return false;
      }
      this.spinShow = true;
      let params = {
        url: '/stat/chiefs/rcnum',
        token: storage.session.get('token'),
        data: {
          year: timeFilter(this.uploadItem.year, 'yyyy'),
          area: this.uploadItem.area,
          town: this.uploadItem.town,
          user_type: this.uploadItem.user_type,
        },
        success: res => {
          this.spinShow = false;
          diyLiuDownload(res.data, '巡河数据.xlsx');
        },
      };
      ajaxFilePost(params);
    },

    // 导出数据
    exportAllData() {
      this.spinShow = true;
      let params = {
        data: {
          month: this.searchItem.time_sign,
        },
        token: storage.session.get('token'),
        url: '/stat/chiefs/statchiefexport ',
        success: res => {
          this.spinShow = false;
          diyLiuDownload(res.data, '综合考核统计.xlsx');
        },
      };
      ajaxFilePost(params);
    },
    // 河长扣分数
    getScoreData(region = '', regionName) {
      let params = {
        data: {
          page: this.scorePage.page,
          pageSize: this.scorePage.pageSize,
          order: { end_time: -1 },
          searchValue: {
            check_mode: 'MONTH',
            end_time: this.searchItem.time_sign,
            pass: false,
            user_type: this.searchItem.user_type,
          },
        },
        url: this.urlCheck,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          console.log('res', res.data.result);
          this.scoreData = res.data.result.result;
          this.scorePage.total = res.data.result.totalSize;
        },
      };
      if (region) {
        this.currRegion = region;
        this.currRegionName = regionName;
        params.data.searchValue[`departments.${region}`] = `${regionName}|#|in`;
      }
      ajaxPost(params);
    },
  },
  mounted() {
    let height = getBodyHeight();
    this.getData();
    setTimeout(() => {
      this.maxHeight = height - 149;
    }, 20);
  },
  watch: {
    'uploadItem.area'(data) {
      let str = '';
      if (data.length > 0) {
        data.map((item, index) => {
          if (index !== data.length - 1) {
            str += `${item},`;
          } else {
            str += `${item}`;
          }
        });
        str = `${str}|#|in`;
      }
      let params = {
        url: '/law/city/list',
        token: storage.session.get('token'),
        data: {
          searchValue: {
            level2: str,
            level: '3',
          },
        },
        success: res => {
          this.townList = res.data.result.result;
        },
      };
      ajaxPost(params);
    },
  },
};
</script>

<style lang="scss">
.uploadBox {
  display: flex;
  align-items: center;
  margin-top: 20px;
  > span {
    margin-right: 30px;
  }
  .uploadInput {
    width: 200px;
    margin-right: 10px;
  }
}
.score-count {
  .ivu-modal-body {
    margin-bottom: 15px !important;
  }
}
</style>
